body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #1e3242;
    color: #fff;
}

.center {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 100px;

    .ring {
        position: absolute;
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 10px dashed #fff;

        --delay: calc(var(--i) * -0.2s);
        animation: ring 3s cubic-bezier(0.98, 0.02, 0.97, 0.12) infinite;
        animation-delay: var(--delay);
    }
}

@keyframes ring {
    0% {
        transform: scale(0);
        opacity: 0.1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: scale(4) rotate(120deg);
        opacity: 1;
    }
}
